<template>
	<view class="container">

		<view class="bg-view">
			<view class="bg_box">
				<!-- 顶部状态栏 -->
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt">核销</view>
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

				<view class="title_one">
					<view class="title_top">
						<image src="https://imgs.ynz666.com/2024/07/01/NTVhMDcwYTUzNGY4NTA5ZGI3NmNmMzAzODdlYTViNzg=.png"
							mode="widthFix" class="img"></image>
						<view class="view2">{{type==1?'核销成功':'买单成功'}}</view>
					</view>
					<!-- https://imgs.ynz666.com/2024/07/01/NTVhMDcwYTUzNGY4NTA5ZGI3NmNmMzAzODdlYTViNzg=.png -->
					<!-- <view class="rule">
						<image src="https://imgs.ynz666.com/test/2023/07/18/ZTcyNjI3ZGYxNGJlMmM1NTZlNTRmODU0MmE3ZmEyYjM=.png"
							mode="widthFix" class="img"></image>
							<view class="text">使用规则</view>
					</view> -->
				</view>

			</view>

			<image src="https://imgs.ynz666.com/2024/07/01/ZThhNTgxNDdhZWQyNGE2MDk4ZDdmMjkxYzNlZWY5M2I=.png"
				mode="widthFix" class="bg-image "></image>
		</view>


		<view class="packet">
			<view class="top">
				精选免单推荐
			</view>
			<view class="bottom">
				<view class="b_box">
						<view class="b_item" v-for="(itemA,index) in recommendList"
				@click="jumpDetil(itemA.id)">
							<view class="item_l">
								<image :src="itemA.members_interests[0].icon" v-if="itemA.members_interests[0].icon" mode="aspectFill" class="item_img">
								</image>
								<image src="../../static/qy_i1.png" v-else mode="aspectFill" class="item_img">
								</image>
							</view>
							<view class="item_r">
								<view class="rig_v1">
									{{itemA.members_interests[0].name}}
								</view>
								<view class="rig_v2">
									<view class="t1">
										{{itemA.distance}}
									</view>
									<view class="t2">
										免
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>
			<view class="foot" @click="openPage()">
				查看更多 >>
			</view>
		</view>


	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	// import http from '@/utils/request/http.js';
	import {
		getWalletDetail,
		getWalletLog,
		apiRecommendList,
	} from '../../apis/index.js';
	import env from '@/env/index.js';
	import painter from '@/wxcomponents/painter/painter';
	export default {

		components: {
			customTabbar,
			painter,
		},
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},

				navIndex: 0,
				categorys: [{
						name: '全部明细',
					},
					{
						name: '入账'
					},
					{
						name: '支出'
					}
				],
				saleDate:{},
				par: {
					type: 0,
					page: 1,
					pageSize: 10,
					walletType: 2,
				},
				packetList: [],
				isLastPage: false,
				
				recommendList: [], // 推荐商家
				recommendPage: 1,
				recommendIsLastPage:false,
				location:'',
				
				
			};
		},

		onLoad(options) {
			this.location = app.globalData.latitude + "," + app.globalData.longitude;
			
			that.type = options.type;
			
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.apiRecommendData(); //获取推荐商家列表
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			
			
		},
		onShareAppMessage(res) {

		},
		onReachBottom() {
			
		},
		
		methods: {
			
			jumpDetil(id) {
				let that = this;
				that.$navTo.navigateTo({
					id: 'Home-near-details',
					url: '/pages/storeDetail/storeDetail?store_id=' + id,
					type: [2]
				})
			},
			// 推荐商家
			apiRecommendData() {
				let that = this
				const hotParms = {
					page: that.recommendPage,
					page_size: 8,
					location: that.location,
					adCode: '',
					isHot: false,
					tag: 0,
					adType: 0
				}
				// 热门apiGetHotStore 推荐apiRecommendList
				apiRecommendList(hotParms).then(res => {
					switch (res.code) {
			
						case 200:
							
							let arrNew = res.data.data.data
			
			
							if (res.data.data.data.length > 0) {
								that.recommendList = that.recommendPage == 1 ? arrNew : that.recommendList.concat(
									arrNew);
									
									
							}
							// console.log(that.recommendList, "推荐列表")
							that.recommendIsLastPage = res.data.data.is_last_page;
							break;
						default:
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							break;
					}
				})
			},
			openPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			navClick(index) {
				this.packetList=[]
				this.par.page=1
				this.par.type = this.navIndex = index
				this.SaleDetails()
			},
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/earnings/earnings`
				});
			},
			// 返回按钮
			tapToBack(page) {
				// console.log(1)
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '../index/index'
						})
						break;
					case 'back':
						// console.log(2)
						uni.navigateBack({
							delta: 1,
							fail() {
								uni.switchTab({
									url: '../index/index'
								})
							}
						})
						break;
				}
			},
			SaleDate() {
				let that = this;
				getWalletDetail({
					walletType: 2
				}).then(res => {
					that.saleDate = res.data
					// console.log(that.saleDate,"that.saleDate")
				})
			},
			SaleDetails() {
				let that = this;
				getWalletLog(this.par).then(res => {
					that.packetList = that.par.page == 1 ? res.data.data.map(item => {
						return Object.assign({
							amountTow: item.amount / 100
						}, item)
					}) : that.packetList.concat(res.data.data
						.map(item => {
							return Object.assign({
								amountTow: item.amount / 100
							}, item)
						}));
					that.isLastPage = res.data.is_last_page;
					console.log(that.packetList, "that.packetList")
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {}

	.left-button-box {
		// width: 160rpx;
		// background-color: rgba(255, 255, 255, 0.5);
		// border-radius: 40rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		// border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		// background: linear-gradient(180deg, #F77539 0%,rgba(0,0,0,0) 100%);
		position: relative;
		z-index: 5;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// 	// position: absolute;top: 0;left: 0;
		// 	z-index: -1;
		// }
		// .img{
		// 	width: 188rpx;
		// 	height: 36rpx;
		// }
	}

	.title_one {
		margin: 0 20rpx;
		padding-top: 10rpx;
		position: relative;

		.title_top {
			margin: 0 25rpx;
      display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.img {
				width: 177rpx;
				height: 177rpx;
			}

			.view2 {
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
		.rule{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			display: flex;
			align-items: center;
			opacity: 0.7;
			.img{
				width: 28rpx;
				height: 28rpx;
			}
			.text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 4rpx;
			}
		}
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 510rpx;

		.bg_box {
			height: 510rpx;
			// background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 510rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}

	// banner广告
	.index-banner {
		width: 710rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -85rpx;
		border-radius: 12rpx;
		position: relative;

		swiper,
		swiper-item {
			width: 710rpx;
			height: 180rpx;
		}

		image {
			width: 710rpx;
			height: 180rpx;
			display: block;
			border-radius: 12rpx;
		}
	}


	.packet {
		width: 100%;
		height: 500rpx;
		background: #F4F4F4;
		border-radius: 42rpx 42rpx 0rpx 0rpx;
		margin-top: -57rpx;

		.top {
			margin: 0 20rpx;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}

		.bottom {
			margin: 0 20rpx;
      .b_box {
      	width: 100%;
      	display: flex;
				flex-wrap: wrap;
      	justify-content: space-between;
      
      	.b_item {
      		display: flex;
					width: 313rpx;
          height: 128rpx;
      		background: #fff;
      		border-radius: 10rpx;
      		padding: 16rpx;
					margin-bottom: 20rpx;
      		.item_l {
      			width: 128rpx;
      			height: 128rpx;
      
      			.item_img {
      				width: 128rpx;
      				height: 128rpx;
      				border-radius: 4rpx;
      			}
      		}
      
      		.item_r {
      			padding-left: 16rpx;
      			display: flex;
      			flex-direction: column;
      			justify-content: space-between;
      			flex: 1;
      		  .rig_v1{
      				font-size: 26rpx;
      				color: #333333;
      				word-break: break-all;
      				    white-space: pre-wrap;
      				    word-wrap: break-word;
      				    overflow: hidden;
      				    display: -webkit-box;
      				    text-overflow: ellipsis;
      				    -webkit-box-orient: vertical;
      				    -webkit-line-clamp: 2;
      			}
      			.rig_v2{
      				display: flex;
      				align-items: center;
      				justify-content: space-between;
      				padding-bottom: 10rpx;
      				.t1{
      					font-size: 24rpx;
      					color: #E64E1F
      				}
      				.t2{
      					width: 46rpx;
      					height: 36rpx;
      					background: linear-gradient( 310deg, #F43B00 0%, #FA6D00 100%);
      					border-radius: 6rpx;
      					font-size: 24rpx;
      					color: #FFFFFF;
      					display: flex;
      					align-items: center;
      					justify-content: center;
      				}
      			}
      		}
      	}
      }
			
		}
		.foot{
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			padding: 30rpx 0 100rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	// 数据中心
	.date-center {
		margin: 30rpx 0 56rpx 0;
		padding: 0 20rpx;
	}

	.date-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.date-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 48rpx;
	}

	.date_topBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.view1 {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.view2 {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43B00;
			margin: 8rpx 0;
		}

		.view3 {
			min-width: 116rpx;
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.date_botBox {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.date-item {

		view:nth-child(1),
		view:nth-child(3) {
			font-size: 24rpx;
			color: #868A93;
		}

		view:nth-child(2) {
			font-size: 44rpx;
			font-weight: bold;
			color: #141414;
			line-height: 62rpx;
		}

		view:nth-child(3) {
			color: #8C8C8C;
		}
	}

	.kefu {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		text-decoration: underline;
		padding-bottom: 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;

		.poster {
			width: 650rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -325rpx;
		}

		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;

			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
</style>
